<template>
    <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox" />
        <label for="toggle-all" @click="allPoint">Mark all as complete</label>
        <ul class="todo-list">
            <!-- These are here just to show the structure of the list items -->
            <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
            <li :class="{ completed: val.status }" v-for="(val, key) in todo.todoList">
                <div class="view">
                    <input
                        class="toggle"
                        type="checkbox"
                        v-model="val.status"
                        @click="putBtn(val.id, val.title, val.status)"
                    />
                    <label>{{ val.title }}</label>
                    <button class="destroy" @click="del(val.id, key)"></button>
                </div>
                <input class="edit" value="Create a TodoMVC template" />
            </li>
        </ul>
    </section>
</template>

<script lang="ts" setup>
import { onMounted, ref, computed } from 'vue'
import axios from 'axios'
import { useMainStore } from '../store'

const todo = useMainStore()
//获取数据
onMounted(async () => {
    var data = await axios.get('http://localhost:8000/todo')
    todo.add(data.data)
})
//删除按钮x
const del = async function (key: any, key2: any) {
    // console.log(key);
    // console.log(key2);
    var data = await axios.delete('http://localhost:8000/todo/' + key)
    if (data.status == 200) {
        todo.remove(key2)
    }
}
//修改状态
const putBtn = async function (id: any, title: any, status: any) {
    let obj = {
        id: id,
        title: title,
        status: !status
    }
    await axios.put('http://localhost:8000/todo/' + id, obj)

}
//全选完成
const allPoint = function () {
    todo.todoList.forEach(async (item, index) => {
        if (item.status == false) {
            todo.xuan(index)
            let oobj = {
                id: item.id,
                title: item.title,
                status: true
            }
            await axios.put('http://localhost:8000/todo/' + item.id, oobj)
        }
    })

    // for (let i = 0; i < todo.todoList.length; i++) {
    //     if (todo.todoList[i].status == false) {
    //         todo.xuan(i)
    //         let oobj = {
    //             id: todo.todoList[i].id,
    //             title: todo.todoList[i].title,
    //             status: true
    //         }
    //         axios.put('http://localhost:8000/todo/' + todo.todoList[i].id, oobj,)
    //     }
    // }

}

</script>

<style lang="" scoped>

</style>